<template>
    <div class="navBar">

        <!-- 条件插槽 v-if="$slots.name" -->
        <!-- 作用域插槽 :name:"name" -->
        <div class="left" v-if="$slots.left">
            <!-- 具名插槽 name="name" -->
            <slot name="left" :rice="rice"></slot>
        </div>

        <div class="middle" v-if="$slots.middle">
            <!-- 默认插槽 -->
            <!-- <slot></slot> -->
            <!-- 具名插槽 name="name" -->
            <slot name="middle" :beef="beef"></slot>
        </div>

        <div class="right" v-if="$slots.right">
            <!-- 具名插槽 name="name" -->
            <slot name="right" :noodles="noodles"></slot>
        </div>

    </div>
</template>

<script setup>
import { ref } from 'vue';
const rice = ref('米饭')
const beef = ref('牛肉')
const noodles = ref('面条')
</script>

<style lang="scss" scoped>
* {
    padding: 0;
    margin: 0;
}

.navBar {
    height: 50px;
    width: 100%;
    border: 1px solid black;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>